<script setup lang='ts'>
import { onMounted, ref } from 'vue';

const defaultUrl = ref('')
const images = [
    'https://img1.baidu.com/it/u=1660144460,2979236479&fm=253&fmt=auto?w=800&h=800',
    'https://img1.baidu.com/it/u=92989238,912122795&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
    'https://img2.baidu.com/it/u=3794872249,514938822&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
    'https://img2.baidu.com/it/u=1915052298,2461185267&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
    'https://img2.baidu.com/it/u=3714382521,1408332218&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
]
const changeImg = () => {
    defaultUrl.value = images[Math.floor(Math.random() * images.length)]
}
onMounted(() => {
    changeImg()
})
</script>

<template>
    <div class="container">
        <img class="imgsize" :src="defaultUrl" alt="">
        <button @click="changeImg">切换图片</button>
    </div>

</template>

<style scoped>
.container {
    width: 100%;
    text-align: center;
    margin: 100px auto;
}

.imgsize {
    height: 100px;
    width: 100px;
    border-radius: 50%;
}
</style>